﻿// import * as echarts from "./echarts.min.js";

// $(function () {
//   echarts_1();
//   echarts_2();
//   echarts_3();
//   echarts_4();
//   echarts_5();
//   zb1();
export function echarts_1(ref, data) {
  // console.log(55, data);
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(ref);
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)"
    },
    legend: {
      right: 0,
      top: 30,
      height: 160,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12
      },
      orient: "vertical",
      data: ["总客户数", "下单客户", "新客户"]
    },
    calculable: true,
    series: [
      {
        name: " ",
        color: ["#2f89cf", "#4cb9cf", "#62c98d"],
        type: "pie",
        radius: [30, 70],
        center: ["35%", "50%"],
        roseType: "radius",
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },

        lableLine: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },

        data: [
          { value: data.user_total, name: "总客户数" },
          { value: data.user_total - data.new_user_total, name: "下单客户" },
          { value: data.new_user_total, name: "新客户" }
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
export function echarts_2(ref, data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(ref);

  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)"
    },
    legend: {
      right: 0,
      top: 30,
      height: 160,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12
      },
      orient: "vertical",
      data: ["总客户数", "激活客户", "新客户"]
    },
    calculable: true,
    series: [
      {
        name: "",
        color: ["#2f89cf", "#4cb9cf", "#62c98d"],
        type: "pie",
        //起始角度，支持范围[0, 360]
        startAngle: 0,
        //饼图的半径，数组的第一项是内半径，第二项是外半径
        radius: [51, 100],
        //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
        center: ["50%", "45%"],

        //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 面积展现数据的百分比，半径展现数据的大小。
        //  'area' 所有扇区面积相同，仅通过半径展现数据大小
        roseType: "area",
        //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true
            //  formatter: '{c}辆'
          },
          emphasis: {
            show: true
          }
        },
        labelLine: {
          normal: {
            show: true,
            length2: 1
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { value: data.user_total, name: "总客户数" },
          { value: data.user_total - data.new_user_total, name: "激活客户" },
          { value: data.new_user_total, name: "新客户" }
          // {
          //   value: 0,
          //   name: "",
          //   label: { show: false },
          //   labelLine: { show: false }
          // },
          // {
          //   value: 0,
          //   name: "",
          //   label: { show: false },
          //   labelLine: { show: false }
          // },
          // {
          //   value: 0,
          //   name: "",
          //   label: { show: false },
          //   labelLine: { show: false }
          // },
          // {
          //   value: 0,
          //   name: "",
          //   label: { show: false },
          //   labelLine: { show: false }
          // },
          // {
          //   value: 0,
          //   name: "",
          //   label: { show: false },
          //   labelLine: { show: false }
          // }
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
export function echarts_3(ref, data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(ref);

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B"
        }
      }
    },
    legend: {
      //icon: 'vertical',
      data: ["广东总部", "广西分部"],
      //align: 'center',
      // right: '35%',
      top: "0",
      textStyle: {
        color: "#fff"
      },
      // itemWidth: 15,
      // itemHeight: 15,
      itemGap: 20
    },
    grid: {
      left: "0",
      right: "20",
      top: "10",
      bottom: "20",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        data: data.date
      },
      {}
    ],
    yAxis: [
      {
        axisLabel: {
          show: true,
          textStyle: {
            color: "rgba(255,255,255,.6)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "广东总部",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(24, 163, 64, 0.3)"
                },
                {
                  offset: 0.8,
                  color: "rgba(24, 163, 64, 0)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: "#cdba00",
            borderColor: "rgba(137,189,2,0.27)",
            borderWidth: 12
          }
        },
        data: data.gd
      },
      {
        name: "广西分部",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(39, 122,206, 0.3)"
                },
                {
                  offset: 0.8,
                  color: "rgba(39, 122,206, 0)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: "#277ace",
            borderColor: "rgba(0,136,212,0.2)",
            borderWidth: 12
          }
        },
        data: data.gx
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
export function echarts_4(ref, data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(ref);
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B"
        }
      }
    },
    legend: {
      data: [
        { name: "店铺促销" },
        { name: "产品促销" },
        { name: "代金券" }
        // { name: "满减促销" }
      ],
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,0.9)" //图例文字
      }
    },

    xAxis: [
      {
        type: "category",

        data: data.date,
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          textStyle: { color: "rgba(255,255,255,.6)", fontSize: "14" }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "店铺促销",
        axisLabel: {
          show: true
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } } //左线色
      },
      {
        type: "value",
        name: "产品促销",
        show: true,
        axisLabel: {
          show: true
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } } //右线色
        //splitLine: {show:true,lineStyle: {color:"#001e94"}},//x轴线
      },
      {
        type: "value",
        name: "代金券",
        show: true,
        axisLabel: {
          show: true
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } } //左线色
      }
      // {
      //   type: "value",
      //   name: "满减促销",
      //   show: true,
      //   axisLabel: {
      //     show: true
      //   },
      //   axisLine: { lineStyle: { color: "rgba(255,255,255,.4)" } } //左线色
      // }
    ],
    //   "grid": {
    //     "top": "10%",
    // "right":"30",
    // "bottom":"30",
    // "left":"30",
    //   },
    series: [
      {
        name: "店铺促销",

        type: "bar",
        data: data.store_data,
        barWidth: "auto",
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00aaff"
                },

                {
                  offset: 1,
                  color: "#00aaff"
                }
              ],
              globalCoord: false
            }
          }
        }
      },
      {
        name: "产品促销",
        type: "bar",
        data: data.goods_data,
        barWidth: "auto",

        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00ffff"
                },
                {
                  offset: 1,
                  color: "#00ffff"
                }
              ],
              globalCoord: false
            }
          }
        },
        barGap: "0"
      },
      {
        name: "代金券",
        type: "bar",
        data: data.coupon_data,
        barWidth: "auto",

        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#66b8a7"
                },
                {
                  offset: 1,
                  color: "#66b8a7"
                }
              ],
              globalCoord: false
            }
          }
        },
        barGap: "0"
      }
      // {
      //   name: "满减促销",
      //   type: "bar",
      //   data: [4, 2, 34, 6, 8],
      //   barWidth: "auto",

      //   itemStyle: {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0,
      //             color: "#aaffff"
      //           },
      //           {
      //             offset: 1,
      //             color: "#aaffff"
      //           }
      //         ],
      //         globalCoord: false
      //       }
      //     }
      //   },
      //   barGap: "0"
      // }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

export function echarts_5(ref, data) {
  // 基于准备好的dom，初始化echarts实例
  // console.log(echarts, 4444, ref, data);
  var myChart = echarts.init(ref);
  // 颜色

  var option = {
    tooltip: {
      trigger: "axis"
    },
    grid: {
      left: "16%" // 将左边距设置为宽度的一半，这样左边就不会显示内容了
      // 其他配置...
    },
    legend: {
      data: ["广东总部", "广西分部"],
      textStyle: {
        color: "#fff",
        fontSize: 14
      }
    },
    toolbox: {
      show: false,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    //calculable : true,
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["订单数", "下单人数", "销售额", "客单价"],
        axisLabel: {
          color: "#fff",
          fontSize: 14
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          fontSize: 12,
          color: "#fff",
          formatter(v) {
            v = v.toString();
            if (Math.abs(v) >= 100000000) {
              return (v / 100000000).toFixed(1) + "亿";
            } else if (Math.abs(v) >= 10000) {
              return (v / 10000).toFixed(1) + "万";
            } else {
              return v;
            }
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "广东总部",
        type: "line",
        stack: "总量",
        itemStyle: { normal: { areaStyle: { type: "default" } } },
        data: data.gd_data
      },
      {
        name: "广西分部",
        type: "line",
        stack: "总量",
        itemStyle: { normal: { areaStyle: { type: "default" } } },
        data: data.gx_data
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
    // switchTheme('blue');
  });
}

export function zb1(ref, data) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(ref);
  var option = {
    tooltip: {
      trigger: "item"
    },
    calculable: true,
    color: ["#fc8251", "#00aaff"],
    series: [
      {
        name: "当日销售",
        type: "pie",
        radius: ["50%", "70%"],
        itemStyle: {
          emphasis: {
            label: {
              show: true,
              position: "center",
              textStyle: {
                fontSize: "25",
                fontWeight: "bold"
              }
            }
          }
        },
        data: [
          { value: data.tuihuo, name: "退货" },
          { value: data.sales, name: "销售" }
        ]
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
// });
